<template>
	<view class="bindyhk">
		<view class="card">
			<view class="cell-item" style="border: 0">
				<label>姓名</label>
				<input type="text" v-model="form.name" placeholder="请输入持卡人姓名" :disabled="false" />
			</view>
			<view class="cell-item">
				<label>身份证</label>
				<input type="idcard" v-model="form.cardId" placeholder="请输入身份证号码" :disabled="false" />
			</view>
		</view>
		<view class="card">
			<view class="cell-item" style="border: 0">
				<label>银行卡号</label>
				<input v-model="form.bank_cardId" placeholder="请输入银行卡号" :disabled="false" type="text" />
			</view>
			<view class="cell-item" @click="xzyhpop = true">
				<label>开户银行</label>
				<input v-model="form.bank_name" placeholder="请选择开户银行" :disabled="true" type="text" />
				<image src="@/static/images/right.png" mode="aspectFit"></image>
			</view>

			<!-- <view class="cell-item">
				<label>预留手机号</label>
				<input v-model="form.mobile" placeholder="请输入预留手机号" :disabled="false" type="number" />
			</view>
			<view class="cell-item">
				<label>验证码</label>
				<input v-model="form.code" placeholder="请输入验证码" :disabled="false" type="text" />
				<yzm></yzm>
			</view> -->
		</view>

		<u-popup :show="xzyhpop" round="8rpx" :closeOnClickOverlay="true" @close="xzyhpop = false">
			<view class="xzyhpopbox">
				<view class="title">选择开户银行</view>
				<view class="selectbox">
					<view class="item" @click="select(item)" :class="{ active: nowVal.id == item.id }" v-for="(item, i) in yhlist" :key="i">
						<image :src="item.image" mode="aspectFit"></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
			<footer-btn
				twoBtn
				oneText="取消"
				twoText="确认"
				round="8"
				:twoStyle="{
					color: '#53361E',
					background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
				}"
				:footerStyle="{ position: 'sticky' }"
				@submit="xzyhpop = false"
			></footer-btn>
		</u-popup>

		<footer-btn
			text="提交绑定"
			:btnStyle="{
				color: '#53361E',
				background: 'linear-gradient(135deg, #ffe9cc 0%, #f2cea1 100%)'
			}"
			@submit="submit"
		></footer-btn>
	</view>
</template>

<script>
import { formatDate } from '@/common/date-format.js';
import API from '@/common/api';
export default {
	name: 'bindyhk',
	data() {
		return {
			formatDate,
			xzyhpop: false,
			form: {
				name:'',
				cardId:'',
				bank_cardId:'',
				bank_name:'',
			},
			nowVal:{},
			yhlist: [
				{
					id: 1,
					image: '/static/images/工商银行.png',
					text: '工商银行',
					imgKey:'工商银行',
				},
				{
					id: 2,
					image: '/static/images/中国银行.png',
					text: '中国银行',
					imgKey:'中国银行',
				},
				{
					id: 3,
					image: '/static/images/建设银行.png',
					text: '建设银行',
					imgKey:'建设银行',
				},
				{
					id: 4,
					image: '/static/images/农业银行.png',
					text: '农业银行',
					imgKey:'农业银行',
				},
				{
					id: 5,
					image: '/static/images/邮政银行.png',
					text: '邮政银行',
					imgKey:'邮政银行',
				}
			],
			
		};
	},
	
	onLoad() {
	},
	onShow() {},
	beforeDestroy() {
	},
	onHide() {
	},
	methods: {
		submit(){
			if(!this.form.name){
				uni.showToast({
					title:'请输入持卡人姓名',
					icon:'none'
				})
				return
			}
			
			if(!this.form.cardId){
				uni.showToast({
					title:'请输入身份证号码',
					icon:'none'
				})
				return
				return
			}
			if(!this.form.cardId){
				uni.showToast({
					title:'请输入银行卡号',
					icon:'none'
				})
				return
			}
			if(!this.form.bank_name){
				uni.showToast({
					title:'请选择开户银行',
					icon:'none'
				})
				return
			}
			this.$http.getJson('money_updateBankcard',this.form).then((res)=>{
				console.log(res);
				if(res.code === 1){
					uni.showToast({
						title:'绑定成功'
					})
					setTimeout(()=>{
						this.toBack();
					},500)
				}
			})
		},
		select(item){
			this.nowVal = item;
			this.form.bank_name = item.text;
		}
	}
};
</script>

<style lang="less" scoped>
.bindyhk {
	.xzyhpopbox {
		width: 100%;
		height: 474rpx;
		padding: 0 32rpx;

		border-radius: 8rpx 8rpx 0rpx 0rpx;
		.title {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #000000;
			text-align: center;
			padding: 58rpx 0 42rpx;
		}
		.selectbox {
			display: flex;
			flex-wrap: wrap;
			.item:nth-of-type(2n) {
				margin-right: 0;
			}
			.item {
				.flex-center();
				width: 334rpx;
				height: 80rpx;
				margin-right: 18rpx;
				margin-bottom: 16rpx;
				background: #f5f5f5;
				border: 2rpx solid transparent;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				.j-active2();
				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 24rpx;
				}
				text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}
			}
			.active {
				background: #fff;
				border: 2rpx solid @basecolor;
			}
		}
	}

	.card {
		margin: 24rpx;
		padding: 0rpx 24rpx;
		background: #ffffff;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		.cell-item {
			label {
				flex: initial;
				width: 188rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}
			input {
				text-align: left;
			}
		}
	}
}
</style>
